<script lang="ts" setup>
import { useElementSize } from '@vueuse/core';
import type { FormInstance } from 'element-plus';
const props = defineProps({
  rules: Object,
  model: Object
});
const formRef = useTemplateRef<FormInstance>('formRef');
defineExpose({ validate: () => formRef.value?.validate() });
const formContainer = ref(null);
const { width } = useElementSize(formContainer);
const labelPosition = computed(() => (width.value > 800 ? 'right' : 'top'));
</script>
<template>
  <el-form
    :model="model"
    label-suffix="："
    :label-position="labelPosition"
    :rules="props.rules"
    :label-width="200"
    ref="formRef"
  >
    <div ref="formContainer">
      <slot></slot>
    </div>
  </el-form>
</template>
<style lang="scss" scoped></style>
